```svelte
<script lang="ts">
  import * as tooltip from "@zag-js/tooltip"
  import { useMachine, normalizeProps } from "@zag-js/svelte"

  const id = $props.id()
  const service = useMachine(tooltip.machine, { id })
  const api = $derived(tooltip.connect(service, normalizeProps))
</script>

<button {...api.getTriggerProps()}>Hover me</button>
{#if api.open}
  <div {...api.getPositionerProps()}>
    <div {...api.getContentProps()}>Tooltip</div>
  </div>
{/if}
```
